<template>
  <el-card shadow="never" class="margin-top-20 margin-left-20 margin-right-20">
    <el-row class="margin-bottom-20">
      <el-col>
        <el-button @click="handleEdit({})">添加</el-button>
      </el-col>
    </el-row>

    <el-dialog :visible.sync="dialogVisible" width="30%">
      <div slot="title">
        <i class="el-icon-s-fold margin-right-10"></i>{{ title }}
      </div>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="轮播名称" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="关键字" prop="keys">
          <el-input v-model="form.keys"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleOk"> 确 定 </el-button>
      </span>
    </el-dialog>
    <el-table :data="tableData" style="width: 100%" size="small" border>
      <el-table-column label="名称">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="关键字">
        <template slot-scope="scope">
          <p @click="gotoInfo(scope.row.id)">
            <el-button type="text">
              {{ scope.row.keys }}
            </el-button>
          </p>
        </template>
      </el-table-column>
      <el-table-column label="创建时间">
        <template slot-scope="scope">
          <p>{{ scope.row.created_at | parseTime }}</p>
        </template>
      </el-table-column>
      <el-table-column label="更新时间">
        <template slot-scope="scope">
          <p>{{ scope.row.updated_at | parseTime }}</p>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">
            编辑
          </el-button>

          <el-button size="mini" type="danger" @click="delBanner(scope.row.id)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      class="margin-top-10 text-align-right"
      layout="prev, pager, next"
      @current-change="getData"
      :total="totalCount"
      :current-page.sync="count"
    >
    </el-pagination>
  </el-card>
</template>
<script>
import { createBanner, getBanner, delBanner } from "@/api/system";
import { parseTime } from "@/utils";

export default {
  data() {
    return {
      tableData: [],
      form: {
        pid: 0,
        name: "",
        keys: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          {
            min: 1,
            max: 15,
            message: "长度在 1 到 15 个字符",
            trigger: "blur",
          },
        ],
        keys: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          {
            min: 2,
            max: 15,
            message: "长度在 2 到 15 个字符",
            trigger: "blur",
          },
        ],
      },
      title: "添加banner",
      dialogVisible: false,
      count: 1,
      totalCount: 0,
    };
  },
  filters: {
    parseTime: (val) => {
      return parseTime(new Date(val));
    },
  },
  mounted() {
    this.getData();
  },

  methods: {
    gotoInfo(id){
      this.$router.push('/system/pageBanner?id='+id)
    },
    delBanner(id) {
      delBanner({ id }).then(this.getData);
    },
    handleEdit(form) {
      this.form.name = form.name;
      this.form.keys = form.keys;
      this.form.id = form.id;

      this.dialogVisible = true;
    },
    handleOk() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          createBanner(this.form).then((res) => {
            this.dialogVisible = false;
            this.getData();
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    getData() {
      getBanner({ pid: 0, page: this.count }).then((res) => {
        this.tableData = res.data.data;
        this.totalCount = res.data.totalCount;
      });
    },
  },
};
</script>
